<template>
  <div class="albums_wrap">
    <div class="albums_all">
      <div class="albums_item" v-for="album in albumsInfo" :key="album.id">
        <router-link to="#" class="albums_cover">
          <img
            :src="`${album.picUrl}?param=120y120`"
            :alt="`${album.name}`"
            @mouseover="album.isShowPlay = true"
            @mouseleave="album.isShowPlay = false"
          />
        </router-link>
        <div class="albums_name" :title="`${album.name}`">
          {{ `${album.name}` }}
        </div>
        <span class="albums_pubTime">{{ `${album.publishTime}` }}</span>
        <SvgIcon
          class="iconfont"
          icon="icon-bofang2-copy"
          v-if="album.isShowPlay"
        ></SvgIcon>
      </div>
    </div>
    <!-- 分页器 -->
    <Pagination
      :total="total"
      :pageSize="pageSize"
      :currentPage="currentPage"
      @currentChange="currentChange"
    ></Pagination>
  </div>
</template>

<script lang="ts">
export default {
  name: 'AllAlbums',
}
</script>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { reqArtistAlbums } from '@/api/singerDetail'
import type {
  HotAlbumsItem,
  HotAlbumsList,
} from '@/api/modules/singerDetailModel'
import SvgIcon from '@/components/SvgIcon/index.vue'
import Pagination from '@/components/Pagination/index.vue'
import { formartDate, formatSongTime } from '@/utils/tools'

const route = useRoute()
// 歌手专辑数据
const albumsInfo = ref<HotAlbumsList>([
  {
    id: '', // 专辑id
    artist: [], // 专辑的歌手信息
    name: '', // 专辑歌手
    picUrl: '', // 专辑图片
    publishTime: '', // 专辑发布时间
    type: '', // 专辑类型（单曲）
    isShowPlay: false,
  },
])
// 分页器相关数据
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(12)
const id = route.query.id as string
// 获取歌手的所有专辑
const getArtistAlbums = async () => {
  const res = await reqArtistAlbums({
    id,
    limit: pageSize.value,
    offset: (currentPage.value - 1) * 12, // offset为分页偏移值
  })
  albumsInfo.value = res.hotAlbums
  albumsInfo.value.map(
    (album) =>
      (album.publishTime = formartDate(album.publishTime, 'yyyy-MM-dd'))
  ) // 专辑发布时间格式化
}
// 分页切换
const currentChange = async (newVal: number) => {
  // console.log('当前页改变')
  currentPage.value = newVal // 更新当前页
}
onMounted(async () => {
  // 更新分页器数据
  const result = await reqArtistAlbums({ id, limit: 1000, offset: 0 })
  total.value = result.hotAlbums.length // 获取所有专辑数量
})
watch(
  () => currentPage.value,
  async (newVal) => {
    await getArtistAlbums()
  },
  { immediate: true }
)
</script>

<style lang="less" scoped>
.albums_wrap {
  width: 640px;
  margin: 20px 0 10px 0;
  .albums_all {
    display: flex;
    width: 640px;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
    .albums_item {
      position: relative;
      width: 160px;
      height: 205px;
      img {
        width: 120px;
        height: 120px;
      }
      .albums_name {
        width: 145px;
        font-size: 14px;
        color: #000;
        margin: 8px 0 3px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &:hover {
          cursor: pointer;
          text-decoration: underline;
        }
      }
      .albums_pubTime {
        font-size: 12px;
        color: #666;
      }
      .iconfont {
        position: absolute;
        right: 45px;
        bottom: 95px;
        font-size: 26px;
      }
    }
  }
}
</style>
